<template>
    <div>
      <!-- 列表页面 -->
      <div class="container" v-if="!showEdit">
        <div class="header">
          <div class="title">消息模板列表</div>
        </div>
        <!-- 表格 -->
        <el-table :data="messages" v-loading="loading">
          <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
          <el-table-column prop="msg_tag" label="模板标签" width="200"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="img_url" label="图片" width="200">
            <template #default="scope">
              <el-image :src="scope.row.img_url" :preview-src-list="imgSrcList" style="max-height: 100px; max-width: 100px;">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="msg_tag" label="标签"></el-table-column>
          <el-table-column label="操作" fixed="right" width="275">
            <template #default="scope">
              <el-button plain size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button
                plain
                size="small"
                type="danger"
                @click="handleDelete(scope.row.id)"
                v-permission="{ permission: '删除账号', type: 'disabled' }"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 编辑页面 -->
      <message-modify v-else @editClose="editClose" :editMessageId="editMessageId"></message-modify>
    </div>
  </template>
  
  <script>
  import { onMounted, ref } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import messageModel from '@/model/message'
  import MessageModify from './message'
  
  export default {
    components: {
      MessageModify
    },
    setup() {
      const messages = ref([])
      const editMessageId = ref(1)
      const loading = ref(false)
      const showEdit = ref(false)
      const imgSrcList = ref([])
  
      onMounted(() => {
        getMessages()
      })
  
      const getMessages = async () => {
        try {
          loading.value = true
          messages.value = await messageModel.getMessages()
          initImgSrcList()
          console.log(imgSrcList.value)
          loading.value = false
        } catch (error) {
          loading.value = false
          if (error.code === 10020) {
            messages.value = []
          }
        }
      }

      const initImgSrcList=() => {
        messages.value.forEach(item => {
          if (!item.img_url) {
          return
        }
          imgSrcList.value.push({img_url:item.img_url})
        })
      }
  
      const handleEdit = id => {
        showEdit.value = true
        editMessageId.value = id
      }
  
      const handleDelete = id => {
        ElMessageBox.confirm('此操作将永久删除该信息模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await messageModel.deleteMessage(id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            getMessages()
            ElMessage.success(`${res.message}`)
          }
        })
      }
  
      const editClose = () => {
        showEdit.value = false
        getMessages()
      }
  
      const indexMethod = index => index + 1
  
      return {
        messages,
        loading,
        showEdit,
        editClose,
        handleEdit,
        editMessageId,
        indexMethod,
        handleDelete,
        imgSrcList,
        initImgSrcList
      }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 0 30px;
  
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }
  
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
  </style>
  